require('./LlevelIndex.css');
import {
    getLevelList
} from "./ajax";
$(function () {
    $.init();
    var loading = false;

    getLevelList(0, (res) => {
        loading = false;
        $('.infinite-scroll-preloader').hide();
        if (res.rel != 1) {
            $.detachInfiniteScroll($('.infinite-scroll'));
            // 删除加载提示符
            $('.infinite-scroll-preloader').remove();
            return;
        }

        $("#levelList").data('page', 1);
        $('.list-container').append(renderListItem(res.data));
    });
    $(document).on('infinite', '.infinite-scroll-bottom', function () {
        // 如果正在加载，则退出
        if (loading) return;
        // 设置flag
        loading = true;
        $('.infinite-scroll-preloader').show();
        let page = $("#levelList").data("page");
        getLevelList(page, (res) => {
            loading = false;
            $('.infinite-scroll-preloader').hide();
            if (res.rel != 1) {
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }
            $("#levelList").data('page', page + 1);
            $('.list-container').append(renderListItem(res.data));


        });

    });

})

function renderListItem(data) {

    let level = $.map(data, function (val) {
        let review='';
        if(val.level == -1){
            review='<span id="review-green">审</span>';
        }else if(val.level == -2){
            review='<span id="review-red">审</span>';
        }

        let item = `
        <div class="list-block media-list">
    <ul>
      <li>
        <a href="${_getLevelDetailUrl}?uid=${val.uid}" class="item-link item-content">
          <div class="item-media"><img src=${val.headimgurl} style='width: 4rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">姓名：</div>
              <div class="item-after">${val.truename == ""?val.uname:val.truename}</div>
            </div>
            <div class="item-title-row">
              <div class="item-title">电话：</div>
              <div class="item-after">${val.mobile}</div>
            </div>
            <div class="item-title-row">
              <div class="item-title">微信号：</div>
              <div class="item-after">${val.wxid}</div>
            </div>
            <div class="item-title-row">
              <div class="item-title">地址：</div>
              <div class="item-after">${val.myadd}</div>
            </div>
           ${review}
          </div>
        </a>
      </li>
    </ul>
  </div>
    `;

        return item;

    });
    $('.infinite-scroll-bottom .list-container').append(level.join(''))
}